<template>
	<view style="background-color: #f7f7f7" v-if="checkImg">
		<view class="top">
			<view class="back-btn" @click="backPage()">
				<view class="back-icon"></view>
			</view>
			<view style="text-align: center; font-size: 35rpx; color: #fff">扫码核销</view>
			<view class="card">
				<view>
					<camera device-position="back" flash="off" @error="error" style="width: 100%; height: 300px"></camera>
				</view>
			</view>
		</view>
	</view>
	<view style="height: 100%; background-color: #f7f7f7" v-if="!checkImg">
		<view class="top">
			<view style="text-align: center; font-size: 35rpx; color: #fff">核销操作</view>
			<view class="card">
				<view class="check_code">核销码{{form.verificationCode}}</view>
				<view class="line"></view>
				<view class="big_title">服务内容</view>
				<view class="small_title">{{form.serviceinfo}}</view>
	
				<view class="line"></view>
				<view class="big_title">订单信息</view>
				<view class="small_title">订单价格：￥{{form.serviceprice}}</view>
				<view class="small_title">
					实付金额：
					<span style="font-weight: 500">￥{{form.orderPrice}}</span>
				</view>
				<view class="small_title">优惠金额：￥{{form.serviceprice-form.orderPrice}}</view>
				<view class="small_title">订单编号 {{form.orderNum}}</view>
				<view class="small_title">支付时间 {{form.orderTime}}</view>
				<view class="small_title">预约时间 {{form.reservationTime}}</view>
			</view>
		</view>
		<view style="height: 750rpx"></view>
		<button v-if="!checkConfirm" @click="confirmCheck()" style="margin: 50rpx 100rpx; border-radius: 25px; background-color: #4c8efe; color: white">确认核销</button>
		<button v-if="checkConfirm" @click="toIndex()" style="margin: 50rpx 100rpx; border-radius: 25px; background-color: #808080; color: white">已核销</button>
	</view>
</template>
<!-- <script src="https://cdn.jsdelivr.net/npm/jsqr@1.3.1/dist/jsQR.min.js"></script> -->
<script setup>
import { ref } from 'vue';
import jsQR from 'jsqr';
import request from '../../../utils/request';
import { onReady, onLoad } from '@dcloudio/uni-app';
const checkImg = ref(true);
const checkConfirm = ref(false);
let QRCode=ref()
let form=ref({})
function backPage() {
	uni.navigateBack();
}
onLoad(() => {
	takePhoto();
});
function confirmCheck() {
	
	uni.showModal({
		title: '核销此订单',
		content: '请您仔细核对此订单，此操作不可撤销，请谨慎操作！',
		confirmText: '确认',
		cancelText: '取消',
		success: (res) => {
			if (res.confirm) {
				console.log('用户点击了确定');
				request({
					url: 'merchant/verificationRecord/writeOff/' + uni.getStorageSync('userinfo').mid + '/' + QRCode.value,
					method: 'get',
					success(res) {
						console.log(res);
						if (res.data === 2) {
							uni.showToast({
								title: '核销码过期',
								icon: 'error'
							});
						} else if (res.data === 1) {
							uni.showToast({
								title: '核销码已核销',
								icon: 'error'
							});
						} else if (res.data === -1) {
							uni.showToast({
								title: '核销失败',
								icon: 'error'
							});
						} else if (res.data === 0) {
							uni.showToast({
								title: '核销成功',
								icon: 'success'
							});
							checkConfirm.value = true;
						}
					}
				});
			
			} else if (res.cancel) {
				console.log('用户点击了取消');
				checkConfirm.value = false;
			}
		}
	});
}

function toIndex() {
	uni.redirectTo({
		url: '/pages/index/index'
	});
}
function formatDate(date) {
    const year = date.getFullYear().toString().slice(2);
    const month = String(date.getMonth() + 1).padStart(2, '0');
    const day = String(date.getDate()).padStart(2, '0');
    const hours = String(date.getHours()).padStart(2, '0');
    const minutes = String(date.getMinutes()).padStart(2, '0');
    
    return `${year}-${month}-${day} ${hours}:${minutes}`;
}
function takePhoto() {
	const ctx = uni.createCameraContext();
	let listener = null;
	let isScanning = true;

	const scanHandler = (frame) => {
		if (!isScanning) return;

		const offscreenCanvas = wx.createOffscreenCanvas({
			type: '2d',
			width: frame.width,
			height: frame.height
		});
		const offscreenCtx = offscreenCanvas.getContext('2d');
		const imageData = offscreenCtx.createImageData(frame.width, frame.height);
		imageData.data.set(new Uint8ClampedArray(frame.data));

		const code = jsQR(imageData.data, imageData.width, imageData.height, {
			inversionAttempts: 'dontInvert'
		});

		if (code) {
			console.log('识别内容：', code.data);
			console.log('位置坐标：', code.location);
			
			request({
				url:'merchant/verificationRecord/getwriteOff/' + uni.getStorageSync('userinfo').mid + '/' + code.data,
				method: 'get',
				success(res) {
					console.log(res);
					form.value={...res.data.order,serviceinfo:res.data.service.serviceInfo,serviceprice:res.data.service.serviceCurrentPrice}
					form.value.orderTime=formatDate(new Date(form.value.orderTime))
					form.value.reservationTime=formatDate(new Date(form.value.reservationTime))
					checkImg.value = false;
					QRCode.value=code.data
					isScanning = false;
					if (listener) {
						listener.stop();
						listener = null;
					}	
				},
				fail(err){
					console.log(err);
				}
			})
		} else {
			console.log('未识别到二维码');
		}
	};

	listener = ctx.onCameraFrame(scanHandler);
	listener.start();
}

function error(e) {
	console.log(e.detail);
}
</script>

<style>
@import '@/common/app.css';

.card {
	border-radius: 20px;
	background-color: #fff;
	margin: 30rpx;
	padding: 30rpx 20rpx;
}

.check_code {
	font-weight: 600;
	text-align: center;
}

.line {
	width: 100%;
	height: 1px;
	background-color: gray;
	margin: 20rpx 10rpx;
}

.big_title {
	margin: 20rpx;
	font-weight: 600;
}

.small_title {
	margin: 20rpx;
}

.back-btn {
	margin-left: 20rpx;
	width: 50rpx;
	height: 50rpx;
	position: relative;
}

.back-icon {
	width: 30px;
	height: 30px;
}

.back-icon::before {
	content: '';
	position: absolute;
	width: 20px;
	height: 2px;
	background-color: #fff;
	top: 80rpx;
	left: 47rpx;
	transform: translate(-50%, -50%);
}

.back-icon::after {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	top: 70rpx;
	left: 30rpx;
}
</style>
